<template>
  <div class="app-container">
    <data-group ref="data_group" @select_time="select_time"></data-group>
    <!--    <data-group ref="data_group" @select_time="select_time" :show_button="true"></data-group>-->
    <div class="filter-container">
      <el-row>
        <el-input
          v-model="listQuery.key_word"
          placeholder="关键字"
          style="width: 200px;"
          class="filter-item"
        />
        <el-button

          class="filter-item"
          type="info"
          size="mini"
          style="width: 60px;"
          @click="getDataList"
        >搜索
        </el-button>
        <el-button
          class="filter-item"
          type="primary"
          size="mini"
          icon="el-icon-plus"
          style="float: right"
          @click="addDataForm"
        >添加
        </el-button>
      </el-row>
    </div>
    <el-table
      empty-text="-"
      v-loading="listLoading"
      :data="list"
      :size="table_size"
      fit
      highlight-current-row
      style="width: 100%;">
      <el-table-column type="index" width="50"/>
      <el-table-column v-for="(ctl,index) in table_ctl" :formatter="ctl.formatter" :sortable="ctl.sortable" :key="index" :label="ctl.label" :prop="ctl.prop" v-if="ctl.visiable"
                       align="center"></el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200px" fixed="right">
        <template slot="header" slot-scope="scope">
          <!--          <span style="margin-right: 15px">操作</span>-->
          <el-tooltip class="item" effect="dark" :hide-after="500" content="刷新" placement="top">
            <el-button icon="el-icon-refresh" @click="getDataList" circle type="text"></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" :hide-after="500" content="设置列" placement="top">
            <el-popover
              placement="left"
              title="设置列"
              width="200"
              trigger="click"
              content="设置列">
              <div v-for="(ctl,index) in table_ctl" :key="index" class="margin-top-xs">
                <el-switch v-model="ctl.visiable" active-text="" inactive-text="" active-color="#13ce66" inactive-color="#666666"></el-switch>
                <span>{{ctl.label}}</span>
              </div>
              <el-button slot="reference" icon="el-icon-setting" circle type="text"></el-button>
            </el-popover>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" :hide-after="500" content="行间距" placement="top">
            <el-popover
              placement="left"
              title="行间距"
              trigger="click"
              content="选择间距">
              <el-radio-group v-model="table_size" size="mini">
                <el-radio-button label="medium">大</el-radio-button>
                <el-radio-button label="small">中</el-radio-button>
                <el-radio-button label="mini">小</el-radio-button>
              </el-radio-group>
              <el-button slot="reference" icon="el-icon-crop" circle type="text"></el-button>
            </el-popover>
          </el-tooltip>
        </template>
        <template slot-scope="scope">
          <el-button circle type="text" size="mini" @click="editDataForm(scope.row)">编辑</el-button>
          <!--          <el-button icon="el-icon-edit" circle type="text" size="mini" @click="editDataForm(scope.row)">编辑</el-button>-->
          <!--          <el-button icon="el-icon-edit" class="my-blue" circle size="medium" @click="editDataForm(scope.row)"></el-button>-->
          <el-popover
            placement="top"
            trigger="hover"
            v-if="!(scope.row.STATUS===3)"
            :ref="`popover-${scope.$index}`">
            <p>确定删除id为{{scope.row.id}}的数据吗？</p>
            <div style="text-align: center; margin: 0">
              <el-button type="primary" size="mini"
                         @click="removeData(scope.row),scope._self.$refs[`popover-${scope.$index}`].doClose()">
                确定
              </el-button>
              <el-button type="primary" size="mini"
                         @click="scope._self.$refs[`popover-${scope.$index}`].doClose()">
                取消
              </el-button>
            </div>
            <el-button circle type="text" size="mini" slot="reference">删除</el-button>
            <!--            <el-button icon="el-icon-delete" circle type="text" size="mini" slot="reference">删除</el-button>-->
            <!--            <el-button icon="el-icon-delete" class="my-red" circle size="medium" slot="reference"></el-button>-->
          </el-popover>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      :title="textMap[dialogStatus]"
      :visible.sync="dialogFormVisible"
      style="width: 100%;"
      custom-class="dialogwidth">
      <el-form
        ref="dataForm"
        :model="form"
        label-position="left"
        label-width="150px">
        <div class="lb">
          <el-form-item label="名称：">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <!--          <el-form-item label="用户名：">-->
          <!--            <el-input v-model="form.username"></el-input>-->
          <!--          </el-form-item>-->
          <!--          <el-form-item label="密码：">-->
          <!--            <el-input v-model="form.password" type="password" show-password></el-input>-->
          <!--          </el-form-item>-->
          <!--          <el-form-item label="角色：">-->
          <!--            <el-select style="width: 100%;" v-model="form.roles" multiple>-->
          <!--              <el-option :label="i.name" :value="i.id" v-for="(i,index) in role_list" :key="index">-->
          <!--              </el-option>-->
          <!--            </el-select>-->
          <!--          </el-form-item>-->
          <!--          <el-form-item label="号码：">-->
          <!--            <el-input v-model="form.mobile"></el-input>-->
          <!--          </el-form-item>-->
          <!--          <el-form-item label="过期时间：">-->
          <!--            <el-date-picker v-model="form.EXPIRED_DATE" value-format="yyyy-MM-dd"></el-date-picker>-->
          <!--          </el-form-item>-->
          <el-form-item label="备注：">
            <el-input v-model="form.remark"></el-input>
          </el-form-item>
        </div>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button  type="primary" @click="dialogStatus==='create'?addData():editData()">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="表格列编辑"
      :visible.sync="table_dialog_form_visiable"
      style="width: 100%;"
      custom-class="dialogwidth">
      <el-form
        ref="dataForm"
        label-position="right"
        label-width="200px">
        <div class="lb">
          <el-form-item :label="ctl.label + '：'" v-for="(ctl,index) in table_ctl" :key="index">
            <el-switch v-model="ctl.visiable" active-text="可见" inactive-text="不可见" active-color="#13ce66" inactive-color="#666666"></el-switch>
          </el-form-item>
        </div>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="table_dialog_form_visiable = false" type='primary'>确定</el-button>
      </div>
    </el-dialog>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.page"
      :page-sizes="[20,50,99]"
      :page-size="99"
      :limit.sync="listQuery.limit"
      @pagination="getDataList"
    />
  </div>
</template>

<script>
  import Pagination from '@/components/Pagination/index' // secondary package based on el-pagination
  import dataGroup from '@/views/manage/components/dataGroup'
  import { default_table_ctl } from '@/utils/table_ctl'
  import { getData, getDataDetail, removeData, editData, addData } from '@/api/system'
  import Vue from 'vue'
  import { getPermission } from '@/utils/permission'

  export default {
    components: { Pagination, dataGroup },
    data() {
      return {
        uri: '',
        table_size: 'mini',
        list: [],
        total: 0,
        routeID: 33,
        permission: {},
        role_list: [],
        listLoading: false,
        table_dialog_form_visiable: false,
        form: {},
        dialogFormVisible: false,
        textMap: {
          edit: '编辑',
          create: '添加'
        },
        table_ctl: default_table_ctl,
        // 默认表单数据
        dialogStatus: '',
        listQuery: {
          page: 1,
          limit: 99,
          start_time: null,
          end_time: null
        }
      }
    },
    created() {
    },
    mounted() {
      // this.getDataList()
      // this.permission = getPermission(this.routeID)
      let data = [
        {
          title: '上级代理分佣统计',
          data_list: [
            {
              value: '0 CNY',
              // value2:'0 CNY',
              label: '今日付款'
            },
            {
              value: '0 CNY',
              // value2:'0 CNY',
              label: '今日付款'
            }
          ]
        }
      ]
      this.$refs.data_group.set_data_group(data)
    },
    methods: {
      // 获取数据
      getDataList() {
        let _this = this
        _this.listLoading = true
        let para = _this.cleanObj(Object.assign({}, _this.listQuery))
        getData(_this.uri, para).then(response => {
          _this.list = []
          let items = response.items
          for (let li in items) {
            let i = items[li]
            for (let j in i) {
              if (i[j] && i[j].c) {
                i[j] = i[j].c.join('')
              }
            }
            _this.list.push(i)
          }
          _this.total = response.totalCount
          _this.listLoading = false
        })
      },
      // 添加数据
      addData() {
        let _this = this
        let para = Object.assign({}, _this.form)
        // para.roles = [para.roles]
        addData(_this.uri, para).then((res) => {
          if (res.code === 20000) {
            _this.$message({
              type: 'success',
              message: res.message
            })
            _this.dialogFormVisible = false
            _this.getDataList()
          }
        })

      },
      // 显示添加表单
      addDataForm() {
        this.resetForm()
        this.dialogStatus = 'create'
        this.dialogFormVisible = true
      },
      // 显示编辑表单
      editDataForm(row) {
        this.resetForm()
        this.form = Object.assign({}, row)
        this.dialogStatus = 'edit'
        this.dialogFormVisible = true
      },
      // 重置表单
      resetForm() {
        this.form = this.$options.data().form
      },
      // 编辑数据
      editData() {
        let _this = this
        let para = Object.assign({}, _this.form)
        // para.roles = [para.roles]
        delete para.updateTime
        editData(_this.uri, para).then((res) => {
          if (res.code === 20000) {
            _this.$message({
              type: 'success',
              message: res.message
            })
            _this.dialogFormVisible = false
            _this.getDataList()
          }
        })
      },
      // 删除数据
      removeData(row) {
        let _this = this
        removeData(_this.uri, row).then((res) => {
          if (res.code === 20000) {
            _this.$message({
              type: 'success',
              message: '删除成功!'
            })
            _this.getDataList()
          }
        })

      },
      // 去除无用数据
      cleanObj(obj) {
        for (var ob in obj) {
          if (obj[ob] == null || obj[ob] === '') {
            delete obj[ob]
          } else if (typeof obj[ob] === 'object') {
            obj[ob] = this.cleanObj(obj[ob])
          }
        }
        return obj
      },
      select_time(evt) {
        console.log(evt)
      }
    }
  }
</script>

<style>

</style>
